<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error" class="error">{{ error }}</div>
  <div v-else v-html="htmlContent" class="html-content"></div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";

const htmlContent = ref("");
const loading = ref(true);
const error = ref(null);
onMounted(async () => {
  console.log("==");
  const r = await fetch("/static/privacyPolicy.html");
  // const r = await fetch("/static/serviceAgreement.html");
  htmlContent.value = await r.text();
  loading.value = false;
});
</script>

<style scoped>
/* 可以在这里添加样式 */
.html-content {
  font-size: 16px;
  line-height: 1.5;
}
.html-content :deep(h1) {
  font-size: 1.5em;
}

.html-content :deep(p) {
  font-size: 1em;
  margin: 0.8em 0;
}
.html-content :deep(.page) {
  padding: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.error {
  color: red;
  text-align: center;
  padding: 20px;
}
</style>

<!-- 优品用呗用户隐私保护政策 -->
